<template>
  <!-- 学生住宿信息查询页面 -->
  <div class="app-container">

    <el-row :gutter="24">
<!--      <el-col :span="4">-->
<!--        <leftHouseTree @treeDbClick="treeDbClick"></leftHouseTree>-->
<!--      </el-col>-->
      <el-col :span="24">
        <searchForm class="search" btnItems="search,export" :formOptions="formOptions" @onSearch="onSearch"
          @onReset="onReset" @onExport="onExport" v-show="showSearch" :formLabelWidth="formLabelWidth">
          <el-form-item label="所在院部：">
            <el-select v-model="queryParams.deptId" placeholder="请选择" clearable class="elSelect" @change="handleChange"
              style="width: 100%">
              <el-option v-for="item in deptOptions" :key="item.deptId" :label="item.deptName"
                :value="item.deptId"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="所选专业：">
            <el-select v-model="queryParams.specialityId" clearable placeholder="请选择" style="width: 200px">
              <el-option v-for="item in profession" :key="item.VALUE" :label="item.TITILE"
                :value="item.VALUE"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所在年级：">
            <el-select v-model="queryParams.gradeId" clearable placeholder="请选择" style="width: 200px">
              <el-option v-for="item in gradeDate" :key="item.VALUE" :label="item.TITILE"
                :value="item.VALUE"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="是否新生：">
            <el-select v-model="queryParams.sMark" clearable placeholder="请选择" style="width: 200px">
              <el-option v-for="dict in dict.type.basic_student_mark" :key="dict.value" :label="dict.label"
                :value="dict.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="收费标准：">
            <el-select v-model="queryParams.feeType" clearable placeholder="请选择收费标准" style="width: 100%">
              <el-option v-for="dict in dict.type.sys_charging_standards" :key="dict.value" :label="dict.label"
                :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="房间类型：">
            <el-select v-model="queryParams.type" clearable placeholder="请选择房间类型" style="width: 200px">
              <el-option v-for="dict in dict.type.sys_room_type" :key="dict.value" :label="dict.label" :value="dict.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="楼号：">
            <el-select v-model="queryParams.houseId" clearable placeholder="请选择楼栋号" style="width: 200px">
              <el-option v-for="house in houseInfo" :key="house.houseName" :label="house.houseName" :value="house.houseId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否导出全部：">
            <el-select v-model="queryParams.importAll" placeholder="请选择是否导出全部" style="width: 200px">
              <el-option v-for="dict in dict.type.bus_yes_no" :key="dict.value" :label="dict.label" :value="dict.value">
              </el-option>
            </el-select>
          </el-form-item>

        </searchForm>
        <el-row :gutter="10" class="mb8">
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <el-table :data="userBedList" v-loading="loading">
          <el-table-column type="selection" fixed="left" width="55" align="left" />
          <el-table-column label="注册号" fixed="left" width="100" prop="studentNo" align="left" />
          <el-table-column label="姓名" fixed="left" width="80" prop="studentname" align="left">
            <template slot="header" slot-scope="scope">
              <el-popover placement="top">
                <template slot="reference">
                  <el-button type="text" style="color: #515a6e;font-weight: 600;">姓名</el-button>
                </template>
                <el-input style="width:70%" v-model="queryParams.studentname" placeholder="请输入学生姓名"></el-input>
                &nbsp;
                <el-button type="primary" size="mini" @click="onSearch">确定</el-button>
              </el-popover>


            </template>
<!--            <template slot-scope="scope">-->
<!--              <el-tag :type="scope.row.sMark == 'T' ? 'info' : ''"><dict-tag style="display: inline-block;"-->
<!--                  :options="dict.type.basic_student_mark" :value="scope.row.sMark"></dict-tag></el-tag>-->
<!--              {{ scope.row.studentname }}-->
<!--            </template>-->
          </el-table-column>
          <!-- <el-table-column label="住宿状态" prop="roleKey" align="center" /> -->
          <el-table-column label="性别" width="50" prop="roleKey" align="left">
            <template slot="header" slot-scope="scope">
              <el-popover placement="top">
                <template slot="reference">
                  <!-- <el-button type="text" style="color: #515a6e;font-weight: 600;">性别</el-button> -->
                  <span style="cursor: pointer;">性别</span>
                </template>
                <el-select v-model="queryParams.sex" placeholder="请选择学生性别">
                  <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label"
                    :value="dict.value">
                  </el-option>
                </el-select>
                &nbsp;
                <el-button type="primary" size="mini" @click="onSearch">确定</el-button>
              </el-popover>
            </template>
            <template slot-scope="scope">
              <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"></dict-tag>
            </template>
          </el-table-column>
          <el-table-column prop="college" width="180" label="院系" show-overflow-tooltip>
            <template slot="header" slot-scope="scope">
              <el-popover placement="top">
                <template slot="reference">
                  <el-button type="text" style="color: #515a6e;font-weight: 600;">院系</el-button>
                </template>
                <el-cascader v-model="queryParams.deptId" :options="deptOptions" style="width: 200px"
                  :props="{ value: 'id', currentLabels: 'label', checkStrictly: true }"
                  @change="handleChange"></el-cascader>
                &nbsp;
                <el-button type="primary" size="mini" @click="onSearch">确定</el-button>

                <!-- <el-input v-model="queryParams.studentname" placeholder="请选择院系" @change=""></el-input> -->
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="specialityName" label="专业" width="200" show-overflow-tooltip>
            <template slot="header" slot-scope="scope">
              <el-popover placement="top">
                <template slot="reference">
                  <el-button type="text" style="color: #515a6e;font-weight: 600;">专业</el-button>
                </template>
                <el-select v-model="queryParams.specialityId" clearable placeholder="请选择" style="width: 200px">
                  <el-option v-for="item in profession" :key="item.VALUE" :label="item.TITILE"
                    :value="item.VALUE"></el-option>
                </el-select>
                &nbsp;
                <el-button type="primary" size="mini" @click="onSearch">确定</el-button>

                <!-- <el-input v-model="queryParams.studentname" placeholder="请选择院系" @change=""></el-input> -->
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="className" label="班级" width="140" show-overflow-tooltip>
            <template slot="header" slot-scope="scope">
              <el-popover placement="top">
                <template slot="reference">
                  <el-button type="text" style="color: #515a6e;font-weight: 600;">班级</el-button>
                </template>
                <el-input style="width:70%" v-model="queryParams.className" placeholder="请输入班级"></el-input>
                &nbsp;
                <el-button type="primary" size="mini" @click="onSearch">确定</el-button>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="楼号" width="80" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ (scope.row.houseName || "") }}
            </template>
          </el-table-column>
          <el-table-column label="楼层" width="60" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ (scope.row.floorNo || "")}}
            </template>
          </el-table-column>
          <el-table-column label="宿舍号" width="60" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ (scope.row.roomNo || "") }}
            </template>
          </el-table-column>
          <el-table-column label="教工号" width="100" prop="teacherNo" align="center" show-overflow-tooltip/>
          <el-table-column label="辅导员姓名" width="100" prop="teacherName" align="center" show-overflow-tooltip/>
          <el-table-column label="辅导员电话" width="100" prop="teacherMobile" align="center" show-overflow-tooltip/>
          <el-table-column label="民族" prop="nation" align="center" width="100">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.bc_nation_type" :value="scope.row.nation"></dict-tag>
            </template>
          </el-table-column>
          <el-table-column label="房间类型" prop="type" align="center" width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <dict-tag :options="dict.type.sys_room_type" :value="scope.row.type"></dict-tag>
            </template>
          </el-table-column>
          <el-table-column label="收费标准" prop="feeType" align="center" width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <dict-tag :options="dict.type.sys_charging_standards" :value="scope.row.feeType"></dict-tag>
            </template>
          </el-table-column>
          <el-table-column label="身份证号" width="200" prop="cardCode" align="center" show-overflow-tooltip/>

          <!-- <el-table-column label="标记" show-overflow-tooltip prop="sMark" align="center"> -->
          <!-- <template slot-scope="scope">
              <dict-tag :options="dict.type.basic_student_mark" :value="scope.row.basicStudentMark"></dict-tag>
            </template> -->
          <!-- </el-table-column> -->
          <!-- <el-table-column label="是否重点对象" prop="roleKey" align="center" /> -->
          <!-- <el-table-column label="关注对象类型" prop="roleKey" align="center" /> -->
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize" @pagination="getList" />
      </el-col>
    </el-row>
    <!-- 搜索 -->

    <!-- 新增或修改房间类型 -->
    <!-- <el-dialog :title="title" :visible.sync="open" width="60%" append-to-body>
      <el-form ref="form" :model="form" label-width="110px">
        <el-form-item label="类型名称" prop="nickName">
          <el-input placeholder="请输入类型名称" maxlength="30" />
        </el-form-item>

        <el-form-item label="收费标准" prop="nickName">
          <el-select v-model="queryParams.value1" multiple placeholder="请选择收费标准" style="width: 100%">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="备注" prop="nickName">
          <el-input placeholder="请输入备注" maxlength="30" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>
<script>
import { deptTreeSelect } from "@/api/system/user";
import { getSpecialityByDeptId } from "@/api/information/unitMajor";
import { getGradeSelect } from "@/api/information/gradeInfor";
import { mapState, mapActions } from 'vuex'
import searchForm from "../../components/Search/searchForm.vue";
import leftHouseTree from "./leftHouseTree.vue"
import {
  collegeSelect
} from "@/api/information/studentInfor"
import { parseTime } from "@/utils/util.js"
import {getHouseAllList} from "@/api/apartment/apartmentBuilding";
export default {
  components: { searchForm, leftHouseTree },

  data() {
    return {
      formLabelWidth: "100px",
      formOptions: [
        {
          label: "注册号",
          prop: "studentNo",
          element: "el-input",
          placeholder: "请输入注册号",
        },
        {
          label: "姓名",
          prop: "studentname",
          element: "el-input",
          placeholder: "请输入姓名",
        },
        // {
        //   label: "关注对象类型",
        //   prop: "LX",
        //   element: "el-select",
        //   options: [
        //     { label: "男", value: "1" },
        //     { label: "女", value: "2" },
        //   ],
        //   placeholder: "请选择对象类型",
        // },
        // {
        //   label: "辅导员",
        //   prop: "FDY",
        //   element: "el-input",
        //   placeholder: "请输入辅导员",
        // },
        // {
        //   label: "辅导员电话",
        //   prop: "DH",
        //   element: "el-input",
        //   placeholder: "请输入辅导员电话",
        // },
        // {
        //   label: "教工号",
        //   prop: "JGH",
        //   element: "el-input",
        //   placeholder: "请输入教工号",
        // },
        {
          label: "所在班级",
          prop: "className",
          element: "el-input",
          placeholder: "请输入班级",
        },
      ],
      tableData: [],
      total: 0,
      loading: false,
      showSearch: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        studentname: null,
        studentNo: null,
        specialityId: null,
        deptId: null,
        gradeId: null,
        sex: null,
        className: null,
        houseId: null,
        floorId: null,
        roomId: null,
        sMark: null,
        feeType:null,
        importAll:"0"
      },
      form: {
        deptId: '',
      },
      deptOptions: [],
      profession: [],
      gradeDate: [],
      houseInfo: [],
      exportloading: false,
    };
  },
  dicts: ["sys_charging_standards","sys_normal_disable", "sys_user_sex", "basic_student_mark", "follow_status", "bc_nation_type","sys_room_type","bus_yes_no"],

  created() {
    this.getList();
    this.department();
    this.getGradeInfor();
    this.getHouseInfo();
  },
  computed: {
    ...mapState({
      userBedList: state => state.roomBedList.allocationInfolist,
    })
  },
  methods: {
    ...mapActions({
      getUserBedList: 'roomBedList/getDormAllocationInfolist',
      exportDormAllocationInfolist: 'roomBedList/exportDormAllocationInfolist',
    }),
    // 获取搜索表单提交的数据
    onSearch(val) {
      // 查询条件和分页数据合并
      const arr = Object.assign(this.queryParams, val);
      console.log(arr);
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 重置
    onReset(data) {
      this.queryParams.pageNum = 1;
      const arr = Object.assign(this.queryParams, data);
      Object.assign(this.queryParams, this.$options.data().queryParams);
      this.getList();
    },
    /** 查询角色列表 */
    async getList() {
      this.loading = true;
      await this.getUserBedList(this.queryParams).then(res => {
        this.total = res.total
        this.loading = false
      });
      // listRole(this.addDateRange(this.queryParams, this.dateRange)).then(
      //   (response) => {
      //     this.tableData = response.rows;
      //     this.total = response.total;
      //   }
      // );
    },

    // 获取部门信息
    department() {
      // await deptTreeSelect().then(res => {
      //   this.deptOptions = res.data;
      // });
      collegeSelect().then(res => {
        this.deptOptions = res.data;
      });
    },

    // 下拉树选择
    handleChange(value) {
      this.form.deptId = value;
      this.queryParams.deptId = value;
      this.form.specialityId = "";
      this.getSpeciality();
      // if (typeof value == "object") {
      //   this.form.deptId = value[value.length - 1];
      //   this.queryParams.deptId = value[value.length - 1];
      //   this.getSpeciality();
      // } else if (typeof value == "number") {
      //   this.form.deptId = value;
      //   this.getSpeciality();
      // } else if (value == undefined) {
      //   this.form.specialityId = "";
      // }
    },

    // 查找专业
    getSpeciality() {
      if (this.form.deptId) {
        getSpecialityByDeptId({ deptId: this.form.deptId }).then(res => {
          if (res.code == "200") {
            this.profession = res.data;
          } else {
            console.log("123");
            this.profession = [];
          }
        });
      } else {
        this.profession = [];
      }
    },


    // 查询所在年级
    getGradeInfor() {
      getGradeSelect().then(response => {
        // console.log(response, "Student");
        this.gradeDate = response.data;
      });
    },
    // 查询公寓楼信息
    getHouseInfo() {
      getHouseAllList().then(response => {
        // console.log(response, "Student");
        this.houseInfo = response.rows;
      });
    },

    treeDbClick(e) {
      this.queryParams.houseId = e.houseId
      this.queryParams.floorId = e.floorId
      this.queryParams.roomId = e.roomId
      this.queryParams.pageNum = 1;
      this.getList();
    },


    // 导出
    async onExport(val) {
      console.log()
      const arr = Object.assign(this.queryParams, val);
      if (!arr.houseId && arr.importAll=='0') {
        this.$message({
          message: '选择您要导出的宿舍楼或者选择导出全部。',
          type: 'warning'
        })
        return;
      }

      if (this.exportloading) {
        this.$message({
          message: '正在导出中，请稍后...',
          type: 'warning'
        })
        return
      }
      this.exportloading = true
      const data = await this.exportDormAllocationInfolist(arr)
      this.exportloading = false

      var blob = new Blob([data], {
        type: "application/x-msdownload;charset=UTF-8",
      });
      // 创建一个blob的对象链接
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      // 把获得的blob的对象链接赋值给新创建的这个 a 链接
      link.setAttribute('download', this.userBedList[0].houseName + '__' + parseTime(new Date()) + '.xls'); // 设置下载文件名
      document.body.appendChild(link);
      // 使用js点击这个链接
      link.click();
      console.log(arr);
    }
  },
};
</script>

<style>
.search .el-form-item {
  margin-bottom: 0px;
}
</style>
